<template>
    <div class="GreenInitiativeSiderRight">
        <common-border-large width="100%" height="100%" text="废气监测">
            <div class="model_one">
                <div class="Green_header_btn">
                    <el-button
                        v-for="(item, index) in status.DateList"
                        :key="index"
                        type="primary"
                        :class="{ active: status.DateIdx === index }"
                        size="small"
                        @click="changeDateBtn(item, index)"
                    >
                        {{ item.name }}
                    </el-button>
                </div>
                <CustomGreenInitiativeSiderRightFormEmissions></CustomGreenInitiativeSiderRightFormEmissions>
            </div>
            <div class="model_two">
                <CustomGreenInitiativeSiderRightTadayEmissions></CustomGreenInitiativeSiderRightTadayEmissions>
            </div>
            <CustomGreenInitiativeCommonCustomCarde
                class="model_three"
                :datalist="status.datalist"
            ></CustomGreenInitiativeCommonCustomCarde>

            <div class="model_four">
                <CustomGreenInitiativeSiderRightFuture1></CustomGreenInitiativeSiderRightFuture1>
            </div>

            <div class="model_four">
                <CustomGreenInitiativeSiderRightFuture2></CustomGreenInitiativeSiderRightFuture2>
            </div>
        </common-border-large>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import type { Ref } from 'vue';
import useContext from '@/utils/useContext';

const DateListName = ref<string>('今日');
const status = reactive({
    DateIdx: 0,
    DateList: [{ name: '今日' }, { name: '本周' }, { name: '本月' }, { name: '今年' }],
    datalist: {
        name: '废气排放口',
        quantity: 6,
        complianceRate: 98
    }
});
// 创建共享数据，传递给 <CustomGreenInitiativeSiderRightTadayEmissions>组件
const { useProvide: useDemoProvide } = useContext<Ref<string>>('changeDate');
useDemoProvide(DateListName);
/** 选择日期 */
const changeDateBtn = (item: object, index: number) => {
    status.DateIdx = index;
    DateListName.value = status.DateList[index].name;
};
</script>
<style scoped lang="scss">
.GreenInitiativeSiderRight {
    height: 100%;
    .model_one {
        height: 20%;
    }
    .model_two {
        height: #{calc((100% - 20%) / 4)};
    }
    .model_four {
        height: calc((80% - ((100% - 20%) / 4) - (3.6% + 8%)) / 2);
    }
    .model_three {
        height: 3.6%;
        margin: 20px 0;
    }
    .Green_header_btn {
        margin-top: 4%;
        ::v-deep(.el-button + .el-button) {
            margin-left: 8px;
        }
        ::v-deep(.el-button) {
            width: 60px;
            font-size: 12px;
            background: rgba($color: #1b93fb, $alpha: 0.2);
            border: none;
        }
        .active {
            width: 60px;
            background: #1b93fb !important;
        }
    }
}
.mt10 {
    margin-top: 10px;
}
</style>
